Configuring a Provider

Providers in AngularJS is the most flexible form of factory you can create. You register a provider with a module just like you do with a service or factory, except you use the provider() function instead. Here is an AngularJS provider example:

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: Service Done!");
        }

        return service;
    }

    return provider;
});

As you can see, the provider() function takes 2 parameters. The first parameter is the name of the service / object which the provider creates. In this case the name is mySecondService. The second parameter is the function which creates the provider. Note: The provider is itself a factory, so at this time no actual service or object is created from the provider. Only the function creating the provider is defined.

When you look at the function creating the provider you can see that the provider is a JavaScript object.

The JavaScript provider object contains a single $get() function. This is the factory function of the provider. In other words, the $get() function creates whatever the provider creates (service, value etc.). In the example above, the provider creates a service object which contains a single service function (standard JavaScript function) called doService().

In order to get the product of a provider injected into a controller, do specify a dependency on the provider, just like you would with a service. What is injected into the controller is the product created by the provider, not the provider itself. Here is an AngularJS provider injection example:

myModule.controller("MyController", function($scope, mySecondService) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

As you can see, the name of the provider is used as a parameter in the controller function. The object created by the provider's $get() function will be injected into this parameter.

 

Configuring a Provider

It is possible to configure a provider further via calls to its function during the configuration phase of a module. Here is an example:

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};
    var config   = { configParam : "default" };

    provider.doConfig = function(configParam) {
        config.configParam = configParam;
    }

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: " + config.configParam);
        }

        return service;
    }

    return provider;
});

myModule.config( function( mySecondServiceProvider ) {
    mySecondServiceProvider.doConfig("new config param");
});

myModule.controller("MyController", function($scope, mySecondService) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

Notice how the provider object now has an extra function called doConfig(). This function can be used to set a configuration parameter on the provider.

Notice also the call to the myModule.config() function. The config function takes a function as parameter. This function can configure the module. The function passed to config() takes a single parameter named mySecondServiceProvider. That is the same name the provider is registered with plus Provider as suffix. The suffix tells AngularJS to inject the provider itself, and not the object created by the provider. Inside the function passed to the config() function the mySecondServiceProvider.doConfig() function is called, which sets the config parameter on the provider.

The controller defined later in the example just depends on the object created by the provider (not the provider itself). It does so by taking a parameter named mySecondService which is the name the provider of the service is registered with. As you can see, the service used from inside the $scope.whenButtonClicked() function.

 

Constants

In the previous section on providers you saw how to configure a provider via the module.config() function. Unfortunately you cannot inject values into the module.config() function. Instead you can inject constants.

Constants in AngularJS are defined using the module.constants() function. Here is an AngularJS constant example:

myModule.constant("configValue", "constant config value");

This constant can now be injected into the module.config() function like this:

myservices.config( function( mySecondServiceProvider, configValue ) {
    mySecondServiceProvider.doConfig(configValue);
});

As you can see, the parameter configValue matches the name of the constant which is also configValue. Thus the value of the constant will be injected into this parameter. The constant value is then passed as parameter to the doConfig() function on the mySecondServiceProvider provider.